<template>
    <h1>阻止事件事件冒泡</h1>
    <div @click="clickA">
        <p @click.stop="clickB">阻止的是父元素不能点击</p>
    </div>
    
</template>
<script>

export default {
    data(){
        return{
            count:1
        }
    },
    methods:{
        clickA(){
            console.log('aaa')
        },
        clickB(e){
            //原生阻止，阻止的是父元素不能点击
            // e.stopPrepagation();
            console.log('bbb')
        }
    }
}
</script>

<!-- 
<template>
    <h1>阻止默认事件</h1>
    <a @click.prevent="chickHandle($event)" href="www.baidu.com">阻止href跳转</a>
    
</template>
<script>

export default {
    data(){
        return{
            count:1
        }
    },
    methods:{
        chickHandle(e){
            //阻止默认事件，可以由@click.prevent代替
            //e.preventDefault()
            console.log('点击了')
        }
    }
}
</script>
 -->

<!-- 
<template>
    <button v-on:click="addCount($event,'你好')">add</button>
    <button @click="addCount($event,'你好')">add简写</button>
    <p>{{ count }}</p>
    
</template>
<script>

export default {
    data(){
        return{
            count:1
        }
    },
    methods:{
        addCount(e,msg){
            this.count++
            console.log(msg)
            e.target.innerHTML='abd:'+this.count+msg
        }
       
    }
}
</script>
 -->

<!-- 
<template>
    <h1>内连事件处理器</h1>
    <button v-on:click="addCount">add</button>
    <button @click="addCount">add简写</button>
    <p>{{ count }}</p>
    
</template>
<script>

export default {
    data(){
        return{
            count:1
        }
    },
    methods:{
        //event每个函数都默认有
        //event是原生js的对象
        addCount(event){
            console.log(event)
            //获取当前标签,输出：<button>add简写</button>
            console.log(event.target)
            this.count++
            //修改当前标签的内容
            event.target.innerHTML='abd:'+count
        }
    }
}
</script>
 -->
<!-- 
<template>
    <h1>内连事件处理器</h1>
    <button v-on:click="addCount">add</button>
    <button @click="addCount">add简写</button>
    <p>{{ count }}</p>
    
</template>
<script>

export default {
    data(){
        return{
            count:1
        }
    },
    methods:{
        addCount(){
            //this= data()函数，可以调用data里面的所有东西
            this.count++;
            console.log(this.count)
        }
    }
}
</script>
 -->

<!--  



<template>
    <h1>内连事件处理器</h1>
    <button v-on:click="count++">add</button>
    <button @click="count++">add简写</button>
    <p>{{ count }}</p>
    
</template>
<script>

export default {
    data(){
        return{
            count:1
        }
    }
}
</script>
-->